<template>
  <div class="ep-progress" :style="{ width: width }">
    <a-progress :percent="percent" :size="size" />
  </div>
</template>

<script>
export default {
  name: "epProgress",
  props: {
    width: {
      type: String,
      default: "150px",
    },
    percent: {
      type: Number,
      required: true,
    },
    size: {
      type: String,
      default: "small",
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.ep-progress {
  height: 24px;
}
// 进度条样式
::v-deep .ant-progress-inner {
  background-color: transparent;
  border: 1px solid #1a5e88;
  padding: 1px;
  .ant-progress-bg {
    background: linear-gradient(to right, #2175a9, #74e6fc);
  }
}
::v-deep .ant-progress-text {
  color: #fff;
  font-weight: bold;
}
</style>
